<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');
?>

<!-- JavaScript -->
<script type="text/javascript" src="<?= base_url() ?>js/wufoo.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>css/form/form.css" media="screen, tv, projection" title="Default" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/datepicker.css" media="screen, tv, projection" title="Default" />
<script type="text/javascript" src="<?= base_url() ?>js/datepicker.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>public/highcharts/js/highcharts.js"></script>

	<style type="text/css">

	</style>
	<?
	$target = array();
	$real = array();
	for($i=1;$i<5;$i++){
		$real[$i] = 0;
	}
	$deskripsi = '';
	
	foreach($row->result() as $view){
		$bulan = $view->BULAN;	
		$sasaran = $view->IDSASARAN_KEG;
		  $target[1] = $view->TARGET_MAR;
		  $target[2] = $view->TARGET_JUN;
		  $target[3] = $view->TARGET_SEP;
		  $target[4] = $view->TARGET_DEC;
		  $deskripsi = $view->DESKRIPSI;
		  
		switch ($bulan)
		{
		case 3:	
		  $real[1] = $view->VOLUME;
		  break;
		case 6:	
		  $real[2] = $view->VOLUME;
		  break;
		case 9:	
		  $real[3] = $view->VOLUME;
		  break;
		default:	
		  $real[4] = $view->VOLUME;
		  break;
		}
	}
	
	if($deskripsi == ''){
		$row2 = $row2->row();
		$deskripsi = $row2->DESKRIPSI;
		$sasaran = $row2->IDSASARAN_KEG;
		$target[1] = $row2->TARGET_MAR;
		$target[2] = $row2->TARGET_JUN;
		$target[3] = $row2->TARGET_SEP;
		$target[4] = $row2->TARGET_DEC;
	}
	?>
	
	
	<script type="text/javascript">
		
	var chart;
	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'contentform',
				defaultSeriesType: 'column'
			},
			title: {
				text: 'Target dan Realisasi Indikator'
			},
			subtitle: {
				text: '<?= $deskripsi?>'
			},
			xAxis: {
				categories: [
					'I',
					'II',
					'III',
					'IV'
				],
                title: {
					text: 'TRIWULAN'
                }
				// untuk memiringkan 
				// ,
                    // labels: {enabled:true,y : 20, rotation: -45, align: 'right' }

			},
			yAxis: {
				min: 0,
				title: {
					text: 'NILAI'
				}
			},
			legend: {
				layout: 'vertical',
				backgroundColor: '#FFFFFF',
				align: 'left',
				verticalAlign: 'top',
				x: 100,
				y: 45,
				floating: true,
				shadow: true
			},
			tooltip: {
				formatter: function() {
					return 'Triwulan '+this.x +', Nilai : '+ this.y;
				}
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
				series: [{
				name: 'Target',
				data: [<?=$target[1]?>, <?=$target[2]?>, <?=$target[3]?>, <?=$target[4]?>]

			}, {
				name: 'Realisasi',
				data: [<?=$real[1]?>, <?=$real[2]?>, <?=$real[3]?>, <?=$real[4]?>]

			}]
		});
	});

	</script>
	
	<div id="container">
	<fieldset class="fieldset">
	<legend class="legend">
		| Grafik Indikator Kinerja Kegiatan |
	</legend>
	
	<div class="info">
		<div><?= $deskripsi?></div>
	</div>
	<div>
		<?= anchor(site_url('indikator_kegiatan/rinci/'.$sasaran),img(array('src'=>'images/main/38.png','border'=>'0','alt'=>'')).' Kembali ke daftar indikator kinerja kegiatan','Menampilkan halaman Daftar Indikator Kinerja (Kegiatan)'); ?>
	</div>
 <!-- Konten -------------------------------------------------------------------------->
 <div id="contentform"></div>
 
</fieldset>
</form>
</div><!--container-->
